<template>
  <a-drawer
    title="管理计划"
    :width="600"
    :visible.sync="visible"
    :body-style="{'padding-top': '0px', paddingBottom: '80px' }"
    @close="close"
  >
    <a-divider orientation="left">基础信息</a-divider>
    <a-descriptions size="small" :column="2" layout="vertical" bordered>
      <a-descriptions-item label="计划ID">{{manageplanDetail.Id||'无'}}</a-descriptions-item>
      <a-descriptions-item label="周期天数">{{manageplanDetail.Between2Date||'无'}}天</a-descriptions-item>
      <a-descriptions-item label="开始时间">{{manageplanDetail.DpmpStarttime||'无'}}</a-descriptions-item>
      <a-descriptions-item label="管理建议">{{manageplanDetail.DpmpSuggest||'无'}}</a-descriptions-item>
      <a-descriptions-item label="结束时间">{{manageplanDetail.DpmpEndtime||'无'}}</a-descriptions-item>
      <a-descriptions-item label="计划描述">{{manageplanDetail.DpmpInfo||'无'}}</a-descriptions-item>
    </a-descriptions>
    <a-divider orientation="left">打卡记录</a-divider>
    <a-card
      class="min-h-[400px] h-full rounded w-full max-w-full overflow-x-auto"
      :body-style="{padding: '0', height:'100%' ,'max-width': '100%'}"
      :bordered="false"
    >
      <a-table
        ref="table"
        size="small"
        class="h-full"
        :columns="columns"
        :dataSource="list"
        :pagination="pagination"
        @change="tableChange"
        :loading="listLoading"
        :rowKey="(record,index)=>{return index}"
      >
        <template slot="DpmppImage" slot-scope="text, record, index">
          <div class="flex justify-center">
            <template v-if="text.split(',').length>3">
              <img
                v-for="src in text.split(',').slice(0,3)"
                class="w-[40px] h-[40px] m-1 rounded-lg overflow-hidden border"
                :src="`${$store.getters.baseUrl}${src}`"
              />
            </template>
            <template v-else>
              <img
                v-for="src in text.split(',')"
                class="w-[40px] h-[40px] m-1 rounded-lg overflow-hidden border"
                :src="`${$store.getters.baseUrl}${src}`"
              />
            </template>
          </div>
        </template>
        <template slot="action" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <a-button type="link" block @click="edit(record)">修改</a-button>
          </div>
        </template>
      </a-table>
    </a-card>
    <div
      class="absolute right-0 bottom-0 w-full border-t border-[#e9e9e9] px-4 py-[10px] bg-white text-left z-1 flex justify-center"
    >
      <a-button :style="{ marginRight: '20px' }" class="w-[400px]" @click="close">返回</a-button>
    </div>
    <edit-planPunch ref="editPlanPunch" @succeed="init" />
  </a-drawer>
</template>

<script>
import { getManageplanDetail, managePlanPunchList } from '@/api/index'
import { slice } from 'lodash'
import EditPlanPunch from './editPlanPunch.vue'
const columns = [
  {
    title: '创建时间',
    className: 'min-w-140p',
    dataIndex: 'DpmppCreatetime',
    align: 'center',
    scopedSlots: { customRender: 'DpmppCreatetime' },
  },
  {
    title: '打卡内容',
    className: 'min-w-120p',
    dataIndex: 'DpmppInfo',
    align: 'center',
    scopedSlots: { customRender: 'DpmppInfo' },
  },
  {
    title: '图片',
    className: 'min-w-130p',
    dataIndex: 'DpmppImage',
    align: 'center',
    scopedSlots: { customRender: 'DpmppImage' },
  },

  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    width: '150px',
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  components: { EditPlanPunch },
  data() {
    return {
      columns,
      searchForm: {},
      /**分页 */
      pagination: {
        current: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
        showTotal: (total) => `共 ${total} 条数据`,
      },
      /**table数据 */
      list: [],

      visible: false,
      loading: false,
      listLoading: false,
      manageplanDetail: {},
    }
  },
  mounted() {},
  methods: {
    /**
     *
     * @param {*} data 数据
     */
    async open(id) {
      this.visible = true
      this.id = id
      this.init()
      try {
        const { data } = await getManageplanDetail({ id })
        this.manageplanDetail = data
      } catch (error) {
        this.$message.error(error)
      }
    },
    init() {
      this.pagination.current = 1
      this.getList()
    },
    //分页
    tableChange(pagination) {
      this.pagination = pagination
      this.getList()
    },
    /**
     * 获取列表
     */
    async getList() {
      this.listLoading = true
      const { current, pageSize } = this.pagination
      try {
        const { data } = await managePlanPunchList({
          ...{ page: current, pageSize },
          ...this.searchForm,
          id: this.id,
        })
        const { Page, PageSize, Total, Lists } = data
        this.list = Lists || []
        this.pagination = {
          current: Page,
          pageSize: PageSize,
          total: Total,
        }
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.listLoading = false
      }
    },
    edit(record) {
      this.$refs.editPlanPunch.open(record)
    },
    close() {
      this.visible = false
    },
  },
}
</script>
<style lang="less" scoped>
.shadow {
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
}
</style>